<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        你是谁{{message}}你是谁
    </div>
    <script>
        //1.递归拷贝
        // var obj1 = {
        //     name: '张三',
        //     age: 18,
        // }

        // console.log(obj1);

        // var obj2 = obj1;
        // var obj2 = {};

        // for (var key in obj1) {
        //     obj2[key] = obj1[key];
        // }

        // // obj2.age = 40;
        // console.log(obj1);

        //2.深拷贝函数
        // var ojb = {
        //     name: '张三',
        //     age: 18,
        // }

        // function deepCopy(obj1) {
        //     var obj2 = {};
        //     for(var key in obj1) {
        //         obj2[key] = obj1[key];

        //     }
        //     return obj2;
        // }
        
        // var obj1 = {
        //     name: '张三',
        //     age: 18,
        // }
        // var obj2 = deepCopy(obj1);
        // obj2.age = 30;
        // console.log(obj1);


        // 1.直接创建对象
        // Object.create(对象,配置参数);
        // var obj = Object.create({name:"zhangsan", age:18});
        // console.log(obj);

        //2.配置参数创建对象
        // var obj = Object.create(null,{
        //     name:{
        //         value: "zhangsan",
        //         writable: true,
        //         enumerator:true,
        //         configurable:true
        //     },
        //     age:{
        //         value:20,
        //         writable: true,
        //         enumerator:true,
        //         configurable:true
        //     }
        // })

        // console.log(obj);
        
        // obj.name = "lisi";
        // console.log(obj);

        // obj.age = "18";
        // console.log(obj);

        // for(var key in obj) {
        //     console.log(key);
        // }
        // delete obj.name;
        // console.log(obj);


        // 3.储存器配置对象





        //defineProperty 创建一个可控对象,修改一个对象,为可控制
        // Obiect.defineProperty()

        // 1.创建一个可控对象
        // var obj = { };
        // var val = "zhangsan";
        // var obj = Object.defineProperty({}, "name",{
        //     get:function() {
        //         console.log("get...");
        //         return val;
        //     },
        //     set:function(newvalue) {
        //         console.log("修改了", newvalue);
        //         if(val !== newvalue)
        //             val = newvalue;
        //     },
        //     configurable:true,
        //     Enumerator:true
        // })
        // console.log(obj);
        // obj.name = "wangwu";
        // console.log(obj);

        // 2.修改一个对象为可控制对象
        // var obj = {
        //     name:"zhangsan",
        //     age: 18
        // }
        // console.log(obj);
        // Object.defineProperty(obj,"age",{ 
        //     get:function() {
        //         return 20;
        //     },
        //     set:function() {
        //         console.log("set",newvalue);
        //     },
        //     configurable:true,
        //     enumerable:true
        // })

        // Object.defineProperty(obj,"name", {
        //     get:function() {
        //         return "lisi";
        //     },
        //     set:function() {
        //         console.log("set", newvalue);

        //     },
        //     configurable:true,
        //     enumerable:true
        // })
        // console.log(obj);


        // var obj = {
        //     name: "zhangsan",
        //     age: 18
        // }
        // function observe(obj){
        //     for(var key in obj){
        //         Object.defineProperty(obj,key,{
        //             get:function(){
        //                 console.log("get");
        //                 return obj[key];
        //             },
        //             set:function(newvalue){
        //                 if(obj[key]!=newvalue){
        //                     obj[key] = newvalue;
        //                 }
        //             },
        //             configurable:true,
        //             enumerable:true
        //         })
        //     }
        // }
        // observe(obj);
        // console.log(obj);

        var data = {
            message:"这是我的数据"
        }

        var APPEle = document.querySelector("#app");
        var str = APPEle.innerHTML;

        var reg = /\{\{([^{}]+)\}\}/;
        if(reg.test(str)) {
            console.log("大的花括号");
            var $1 = RegExp.$1;
            console.log($1);
            var message = data[$1];
            APPEle.innerHTML = APPEle.innerHTML.replace(reg.message);

        }

        var val = data['message'];
        Object.defineProperty(data, "message", {
            get:function() {
                console.log("get");
                return val
            },
            set:function(newvalue) {
                console.log("set");
                var oldvalue = message;
                console.log(oldvalue);
                APPEle.innerHTML = APPEle.innerHTML.replace(oldvalue,newvalue)
                if(val != newvalue) {
                    val = newvalue;
                }
            },
            configurable:true,
            enumerable:true
        })
        console.log(data);

    </script>
</body>
</html>